<template>
	<view class="content">  
		<view class="coupon_list" v-if="list.length!=0">
			<view class="coupon_item fx-row-sb-start" v-for="(item,index) in list" :key="item.id">
				<image class="cou_icon" src="../../static/picture/coupon1.png" mode="widthFix"></image>
				<view class="coupon_le fx-col-c">
					<image class="cou_icon" src="../../static/picture/coupon.png" mode="widthFix"></image>
					<view class="ft28" style="position: relative;z-index: 2;">￥ <span style="margin-left:2rpx;font-weight: 600;font-size: 50rpx;"> {{item.price}}</span></view> 
				</view>
				<view class="coupon_ri fx-row-sb-c">
					<view class="coupon_text">
						<view class="coupon_tit ">
							<view class="fx-row-sta" style="margin-bottom: 4rpx;">
								<view class="coupon_name ft30">{{item.name}}</view>
								<view class="label">抖音专享</view>
							</view>
							<view class="ft20">仅限该项目使用</view>
						</view> 
						<view class="ft20">{{item.createTime}}获得</view>
					</view>
					<view class="coupon_neck usebg" v-if="item.status==1">已使用</view>
					<view class="coupon_neck" @click="gouse" v-else-if="item.status==0">立即使用</view>
				</view> 
			</view> 
			<uv-load-more :status="isLoading" fontSize='12' color='#696969' nomoreText=' '/>
		</view> 
		<!-- 缺省状态 -->
		<view v-else class="emptys">
		 <image src="@/static/picture/empty.png" mode="widthFix" lazy-load></image>
		 <view>暂无团购券</view>
		</view> 
		<view style="height: 40rpx;"></view>
	</view>
</template>

<script>
	import { spaCoupons } from '@/utils/api.js' 
	import badgeMix from '@/common/mixins.js' 
	export default { 
		mixins: [badgeMix],
		data() {
			return { 
				list:[], 
				isLoading:'nomore',  //是否加载中
				pageNum:1,//请求的页码
				pageSize:10,//请求的条数  
			}
		},
		onLoad() {
			// this.list = []
			this.pageNum = 1
			this.getCoupons()
		},
		methods: { 
			getCoupons(){
				uni.showLoading({
					title:'加载中'
				})
				const  datas = {
					"current": this.pageNum,  //页码
					"size": this.pageSize,   //条数 
				} 
				spaCoupons(datas).then((res) => {  
					uni.hideLoading()
					if(res.code == '200'){ 
						res.result.records.forEach((item,index)=>{
							item.price = this.conversion(item.price).split(".")[0] 
						}) 
						const data = res.result.records
						this.list = [...this.list,...data]  
					}
				})  
			},
			gouse(){
				uni.switchTab({
					url:'/pages/index/index'
				}) 
			},
		}, 
　　onReachBottom() {    
			this.pageNum++
			//调用请求接口
			this.getCoupons()
		},
	}
</script>

<style  lang="scss">
	page{
		background-color:$uni-main-page ;
	} 
	.coupon_list{
		width: 714rpx;
		// height: 152rpx;
		margin: 0 18rpx;
		padding: 20rpx 0;
		.coupon_item{
			position: relative;
			margin-bottom: 20rpx;
			background-color: #FFF4F1;
			border-radius: 25rpx;
			// box-shadow: 0 6rpx 10rpx rgba(159, 159, 159, 0.1);
			overflow: hidden;
			.cou_icon{
				position: absolute;
				right: 0;
				top: 0;
				width: 170rpx;
				z-index: 0;
			}
			.coupon_le{
				position: relative;
				width: 184rpx;
				height: 152rpx;
				text-align: center;
				font-size: 24rpx;
				color: #fff;
				// background: linear-gradient(109deg, #FBB560 0%, #FF6864 100%);
				z-index: 1;
				image{
					position: absolute;
					width: 184rpx;
					z-index: 0;
				} 
			} 
			.coupon_ri{
				position: relative;
				width: 494rpx;
				padding: 0 20rpx;
				margin-top: 10rpx;
				color: #FE0000;
				z-index: 1;
				.coupon_text{
					width: 330rpx;
					margin-right: 14rpx;
					.coupon_tit{ 
						padding: 2rpx 0 12rpx 0;
						margin-bottom: 8rpx;
						border-bottom: 2rpx dashed #FFC9BB; 
						.label{
							margin-left: 18rpx;
							padding: 0 10rpx;
							font-size: 24rpx;
							color: #FF8100;
							border-radius: 8rpx;
							border: 2rpx solid #FF8100;
						}
						.coupon_name{
							max-width: 180rpx;
							overflow: hidden;  
							white-space: nowrap;  
							text-overflow: ellipsis; 
						}
					}
				}
				.coupon_use{
					width: 134rpx;
					height: 54rpx; 
					border: 3rpx solid rgba(254, 5, 6, 1); 
					font-size: 24rpx;
					border-radius: 35rpx;
					text-align: center;
					line-height: 54rpx;
				}
				.coupon_neck{
					width: 134rpx;
					padding: 10rpx 0;
					margin-top: 48rpx;
					background: linear-gradient(109deg, #FC5C6D 0%, #FD0608 100%);
					font-size: 24rpx;
					color: #fff;
					border-radius: 40rpx;
					text-align: center;
				}
				.usebg{
					background: linear-gradient(109deg, #FEC2C9 0%, #FFA5A5 100%);
				}
			}
		}
	}
</style>
